import { Input } from "antd";
import React, { useEffect, useState } from "react";
import style from "./style.less"
import vipIcon from "../../source/svgs/vip.svg"
import userStore from "../../store/user";
import { logOutHandle } from "../../service/account";
import cookieStore from "../../store/cookie";
import { IRequestArticleParam } from "../../interface/Article";
import { useNavigate } from "react-router-dom";
import { ArrowDown, ArrowUp } from "../../source/svgs";

const { Search } = Input

interface IProps {
  init: () => void
  getData: (param: IRequestArticleParam) => void
  userName: string
  showHotSearch: string
  interrap: () => void
  setKeyWord: (value: string) => void
}

export default function GuideBar(props: IProps) {
  const navigate = useNavigate()
  const [media, setMedia] = useState<'PC' | 'PHONE'>()
  const [showSelect, setShowSelect] = useState<boolean>(false)

  window.onresize = function () {
    const width = window.screen.availWidth
    if (width > 767) {
      setMedia('PC')
    } else {
      setMedia('PHONE')
    }
  }

  useEffect(() => {
    const width = window.screen.availWidth
    if (width > 767) {
      setMedia('PC')
    } else {
      setMedia('PHONE')
    }
  }, [])
  function judgeSearchContent(searchContent: string) {
    props.setKeyWord(searchContent)
  }

  async function logOut() {
    if (props.userName === '登录/注册' || (!sessionStorage.getItem('stageUser'))) {
      userStore.dispatch({ type: 'LOGOUT', loginAccount: '' })
      sessionStorage.removeItem("stageUser")
      cookieStore.dispatch({ type: 'LOGOUT', cookie: '' })
      navigate("/login")
    } else {
      const data = await logOutHandle(cookieStore.getState().toString())
      if (data.stat === 'ok') {
        userStore.dispatch({ type: 'LOGOUT', loginAccount: '' })
        sessionStorage.removeItem("stageUser")
        cookieStore.dispatch({ type: 'LOGOUT', cookie: '' })
        alert("退出登录成功")
        navigate("/login")
      } else if (data.stat === 'User_Not_Login') {
        alert("用户未登录，请重新登陆")
        navigate("/login")
      } else if (data.stat === 'User_Login_Outdate') {
        alert("用户信息过期，请重新登录")
        userStore.dispatch({ type: 'LOGOUT', loginAccount: '' })
        sessionStorage.removeItem("stageUser")
        cookieStore.dispatch({ type: 'LOGOUT', cookie: '' })
        navigate('/login')
      }
    }
  }

  function jumpTO(url: string) {
    if ((!!sessionStorage.getItem("stageUser")) && (props.userName !== "登录/注册")) {
      navigate(url)
    } else {
      alert("请先登录")
      props.interrap()
    }
  }

  return (
    <React.Fragment>
      {media === 'PC' ? (<div className={style.guideBar}>
        <div className={style.searchBar}>
          <Search placeholder={props.showHotSearch} onSearch={(value) => { judgeSearchContent(value) }} />
        </div>
        <div>
          <span className={style.singIn} onClick={() => { logOut() }}>{props.userName}</span>
        </div>
        <div className={style.vip}>
          <img src={vipIcon} alt="#" />
          <div>
            <span onClick={() => { alert('功能开发中，敬请期待') }}>会员中心</span>
          </div>
        </div>
        <div>
          <span onClick={() => { jumpTO("/user") }}>个人空间</span>
        </div>
        <div>
          <span onClick={() => { jumpTO("/create") }}>开始创作</span>
        </div>
      </div>) : (
        <div className={style.guideBar}>
          <div className={style.searchBar}>
            <Search placeholder={props.showHotSearch} onSearch={(value) => { value !== '' ? judgeSearchContent(value) : judgeSearchContent(props.showHotSearch) }} />
          </div>
          {showSelect ? (
            <div className={style.flexbox}>
              <div onClick={() => { setShowSelect(false) }}>
                <img src={ArrowUp} alt="" />收起
              </div>
              <div className={style.divide}></div>
              <div>
                <span className={style.singIn} onClick={() => { logOut() }}>{"退出登录"}</span>
              </div>
              <div className={style.divide}></div>
              <div className={style.vip}>
                <img src={vipIcon} alt="#" />
                <div>
                  <span onClick={() => { alert('功能开发中，敬请期待') }}>会员中心</span>
                </div>
              </div>
              <div className={style.divide}></div>
              <div>
                <span onClick={() => { jumpTO("/user") }}>个人空间</span>
              </div>
              <div className={style.divide}></div>
              <div>
                <span onClick={() => { jumpTO("/create") }}>开始创作</span>
              </div>
            </div>) : (
            <div className={style.more} onClick={() => { setShowSelect(true) }}>
              {props.userName}
              <img src={ArrowDown} alt="" />
            </div>
          )}
        </div>
      )}

    </React.Fragment>
  )
}